<template>
  <div>
    <div class="container">
      <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form">
        <div v-if="true">
          <h2>登 录</h2>
        </div>

        <el-form-item v-if="loginType==1" class="list-item" prop="username">
          <!-- <div v-if="true">账号：</div> -->
          <!-- <input v-model="loginForm.username" placeholder="请输入账户" /> -->
          <input type="text" v-model="loginForm.username" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item v-if="loginType==1" class="list-item" prop="password">
          <!-- <div v-if="true">密码：</div> -->
          <!-- <input v-model="loginForm.password" placeholder="请输入密码" type="password" /> -->
          <input type="password" name="password" v-model="loginForm.password" placeholder="请输入密码" />
        </el-form-item>

        <el-form-item v-if="roles.length>1" class="list-type" prop="role">
          <el-radio
            v-model="loginForm.tableName"
            :label="item.tableName"
            v-for="(item, index) in roles"
            :key="index"
            @change.native="getCurrentRow(item)"
          >{{item.roleName}}</el-radio>
        </el-form-item>

        <el-button v-if="loginType==1" @click="submitForm('loginForm')">
          <div style="height:20px;line-height:20px">登录</div>
        </el-button>
        <!-- <el-button v-if="loginType==1" @click="resetForm('loginForm')">重置</el-button> -->

        <div class="link-box">
          <router-link
            class="link-to"
            :to="{path: '/register', query: {role: item.tableName,pageFlag:'register'}}"
            v-if="item.hasFrontRegister=='是'"
            v-for="(item, index) in roles"
            :key="index"
          >注册{{item.roleName.replace('注册','')}}</router-link>
          <router-link
            class="link-to"
            :to="{path: '/register', query: {pageFlag:'security1'}}"
          >忘记密码?</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      baseUrl: this.$config.baseUrl,
      loginType: 1,
      roleMenus: [
        {
          backMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-taxi",
                  buttons: ["新增", "查看", "修改", "删除"],
                  menu: "用户",
                  menuJump: "列表",
                  tableName: "yonghu"
                }
              ],
              menu: "用户管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-form",
                  buttons: ["新增", "查看", "修改", "删除"],
                  menu: "电影分类",
                  menuJump: "列表",
                  tableName: "dianyingfenlei"
                }
              ],
              menu: "电影分类管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-brand",
                  buttons: [
                    "新增",
                    "查看",
                    "修改",
                    "删除",
                    "查看评论",
                    "电影分类统计",
                    "导演统计"
                  ],
                  menu: "电影信息",
                  menuJump: "列表",
                  tableName: "dianyingxinxi"
                }
              ],
              menu: "电影信息管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-full",
                  buttons: ["查看", "修改", "删除", "审核"],
                  menu: "用户分享",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-message",
                  buttons: ["查看", "修改", "回复", "删除"],
                  menu: "在线留言",
                  tableName: "messages"
                }
              ],
              menu: "在线留言"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-shop",
                  buttons: ["查看", "修改"],
                  menu: "关于我们",
                  tableName: "aboutus"
                },
                {
                  appFrontIcon: "cuIcon-phone",
                  buttons: ["查看", "修改"],
                  menu: "轮播图管理",
                  tableName: "config"
                },
                {
                  appFrontIcon: "cuIcon-news",
                  buttons: ["新增", "查看", "修改", "删除"],
                  menu: "公告信息",
                  tableName: "news"
                }
              ],
              menu: "系统管理"
            }
          ],
          frontMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-similar",
                  buttons: ["查看"],
                  menu: "电影信息列表",
                  menuJump: "列表",
                  tableName: "dianyingxinxi"
                }
              ],
              menu: "电影信息模块"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-taxi",
                  buttons: ["新增", "查看"],
                  menu: "用户分享列表",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享模块"
            }
          ],
          hasBackLogin: "是",
          hasBackRegister: "否",
          hasFrontLogin: "否",
          hasFrontRegister: "否",
          roleName: "管理员",
          tableName: "users"
        },
        {
          backMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-full",
                  buttons: ["查看", "修改", "删除", "查看评论"],
                  menu: "用户分享",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享管理"
            }
          ],
          frontMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-similar",
                  buttons: ["查看"],
                  menu: "电影信息列表",
                  menuJump: "列表",
                  tableName: "dianyingxinxi"
                }
              ],
              menu: "电影信息模块"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-taxi",
                  buttons: ["新增", "查看"],
                  menu: "用户分享列表",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享模块"
            }
          ],
          hasBackLogin: "否",
          hasBackRegister: "否",
          hasFrontLogin: "是",
          hasFrontRegister: "是",
          roleName: "用户",
          tableName: "yonghu"
        }
      ],
      loginForm: {
        username: "",
        password: "",
        tableName: "",
        code: ""
      },
      role: "",
      roles: [],
      rules: {
        username: [{ required: true, message: "请输入账户", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      codes: [
        {
          num: 1,
          color: "#000",
          rotate: "10deg",
          size: "16px"
        },
        {
          num: 2,
          color: "#000",
          rotate: "10deg",
          size: "16px"
        },
        {
          num: 3,
          color: "#000",
          rotate: "10deg",
          size: "16px"
        },
        {
          num: 4,
          color: "#000",
          rotate: "10deg",
          size: "16px"
        }
      ]
    };
  },
  created() {
    for (let item in this.roleMenus) {
      if (this.roleMenus[item].hasFrontLogin == "是") {
        this.roles.push(this.roleMenus[item]);
      }
    }
  },
  mounted() {},
  //方法集合
  methods: {
    randomString() {
      var len = 4;
      var chars = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9"
      ];
      var colors = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f"
      ];
      var sizes = ["14", "15", "16", "17", "18"];

      var output = [];
      for (var i = 0; i < len; i++) {
        // 随机验证码
        var key = Math.floor(Math.random() * chars.length);
        this.codes[i].num = chars[key];
        // 随机验证码颜色
        var code = "#";
        for (var j = 0; j < 6; j++) {
          var key = Math.floor(Math.random() * colors.length);
          code += colors[key];
        }
        this.codes[i].color = code;
        // 随机验证码方向
        var rotate = Math.floor(Math.random() * 45);
        var plus = Math.floor(Math.random() * 2);
        if (plus == 1) rotate = "-" + rotate;
        this.codes[i].rotate = "rotate(" + rotate + "deg)";
        // 随机验证码字体大小
        var size = Math.floor(Math.random() * sizes.length);
        this.codes[i].size = sizes[size] + "px";
      }
    },
    getCurrentRow(row) {
      this.role = row.roleName;
    },
    submitForm(formName) {
      if (this.roles.length != 1) {
        if (!this.role) {
          this.$message.error("请选择登录用户类型");
          return false;
        }
      } else {
        this.role = this.roles[0].roleName;
        this.loginForm.tableName = this.roles[0].tableName;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http
            .get(`${this.loginForm.tableName}/login`, {
              params: this.loginForm
            })
            .then(res => {
              if (res.data.code === 0) {
                localStorage.setItem("Token", res.data.token);
                localStorage.setItem("UserTableName", this.loginForm.tableName);
                localStorage.setItem("username", this.loginForm.username);
                localStorage.setItem("adminName", this.loginForm.username);
                localStorage.setItem("sessionTable", this.loginForm.tableName);
                localStorage.setItem("role", this.role);
                localStorage.setItem(
                  "keyPath",
                  this.$config.indexNav.length + 2
                );
                this.$router.push("/index/center");
                this.$message({
                  message: "登录成功",
                  type: "success",
                  duration: 1500
                });
              } else {
                this.$message.error(res.data.msg);
              }
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* .container {
  position: relative;

  .list-item /deep/ .el-input .el-input__inner {
    border: 1px solid #999;
    border-radius: 8px;
    padding: 0 10px;
    box-shadow: 1px 2px 4px #ccc;
    color: #999;
    background: -webkit-linear-gradient(top, #fff, #eee);
    width: 100%;
    font-size: 14px;
    height: 44px;
  }
  .list-type /deep/ .el-radio__input .el-radio__inner {
    background: rgba(53, 53, 53, 0);
    border-color: #666666;
  }
  .list-type /deep/ .el-radio__input.is-checked .el-radio__inner {
    background: rgba(64, 158, 255, 1);
    border-color: rgba(64, 158, 255, 1);
  }
  .list-type /deep/ .el-radio__label {
    color: #666666;
    font-size: 14px;
  }
  .list-type /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: rgba(64, 158, 255, 1);
    font-size: 14px;
  }
} */

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg")
    fixed no-repeat;
  background-size: cover;
}
.login-form {
  width: 250px;
  height: 280px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 100;
  background: inherit;
  border-radius: 18px;
  overflow: hidden; /* 隐藏多余的模糊效果*/
}
.login-form::before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  top: -5px;
  left: -5px;
  overflow: hidden;
  background: inherit;
  box-shadow: inset 0 0 0 250px rgba(255, 255, 255, 0.25);
  filter: blur(6px);
  filter: blur(6px);
  z-index: -1;
}
.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  color: #3d5245;
}
​ .login-form input,
.login-form button {
  margin: 6px 0;
  height: 36px;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 0 14px;
  color: #3d5245;
}

.login-form button:focus,
.login-form input:focus {
  outline: 0;
}

</style>
